<template>
  <div class="form-item-group">
    <template v-for="(row, prop) in formData">
      <el-form-item
        :style="{ width: itemWidth }"
        :label="row.label"
        :key="prop"
        v-if="!row.hidden"
        class="form-item"
        :class="{ 'is-required': row.required && type !== 'detail' }"
      >
        <template v-if="type === 'detail'">
          <template v-if="row.type === ':slot'">
            <slot :name="row.slot || prop"></slot>
          </template>
          <div v-else>
            <span v-if="row.dictKey">{{
              row.value | dictLabel(row.dictKey)
            }}</span>
            <span v-else>{{ row.value }}</span>
          </div>
        </template>
        <template v-else>
          <template v-if="row.type === ':slot'">
            <slot :name="row.slot || prop"></slot>
          </template>
          <template v-else-if="row.type === 'select' && row.dictKey">
            <dict-select
              v-model="row.value"
              class="form-item-input"
              :disabled="!!row.disabled"
              :dict-key="row.dictKey"
              :filterable="row.filterable"
              :placeholder="row.placeholder"
              @change="change($event)"
            >
            </dict-select>
          </template>
          <template slot-scope v-else-if="row.type === 'select' && row.options">
            <el-select
              v-model="row.value"
              class="form-item-input"
              :disabled="!!row.disabled"
              :filterable="row.filterable"
              :multiple="row.multiple"
              :placeholder="row.placeholder"
              @change="change($event)"
            >
              <el-option
                v-for="op in row.options"
                :key="op.key"
                :label="op.label"
                :value="op.value"
              />
            </el-select>
          </template>
          <template v-else-if="row.type === 'radio' && row.dictKey">
            <dict-radio
              v-model="row.value"
              class="form-item-input"
              :disabled="!!row.disabled"
              :dict-key="row.dictKey"
              @change="change($event)"
            >
            </dict-radio>
          </template>
          <template v-else-if="row.type === 'switch'">
            <el-switch
              v-model="row.value"
              class="form-item-input"
              :disabled="!!row.disabled"
              active-color="#67C23A"
              inactive-color="#F56C6C"
              :active-value="1"
              :inactive-value="0"
              :active-text="row.text[0]"
              :inactive-text="row.text[1]"
            ></el-switch>
          </template>
          <template v-else-if="row.type === 'date-picker'">
            <el-date-picker
              v-model="row.value"
              class="form-item-input"
              :type="row.pickerType || 'date'"
              value-format="yyyy-MM-dd"
              range-separator="~"
              :disabled="!!row.disabled"
              placeholder="选择日期"
              start-placeholder="选择起始日期"
              end-placeholder="选择终止日期"
              @input="change($event)"
              @change="change($event)"
            >
            </el-date-picker>
          </template>
          <template v-else-if="row.type === 'number'">
            <el-input-number
              v-model="row.value"
              class="form-item-input"
              :placeholder="row.placeholder"
              controls-position="right"
              :disabled="!!row.disabled"
              @change="change($event)"
            />
          </template>
          <template slot-scope v-else>
            <el-input
              v-model="row.value"
              class="form-item-input"
              :type="row.type"
              :disabled="!!row.disabled"
              :placeholder="row.placeholder"
              :maxlength="row.maxlength || (row.type === 'textarea' ? 100 : 36)"
              @input="change($event)"
              @change="change($event)"
            />
          </template>
          <div class="form-item-explain" v-if="!!row.explainTxt">
            {{ row.explainTxt }}
          </div>
          <div
            class="el-form-item__error"
            v-if="row.required"
            v-show="!row.value && startCheck"
          >
            请输入{{ row.label }}
          </div>
        </template>
      </el-form-item>
    </template>
  </div>
</template>

<script>
/**
 *form-item 列表，根据配置，显示form-item输入框，用于添加、编辑对话框中内容输入，支持非空校验
 * 输入参数，使用对象形式，key为api参数名
 * formData = { "param": {label: '名称', value: '', required: true}, }
 * 参数：
 * label: 显示名称
 * value: 输入值
 * type：输入框类型，默认text，支持：select、date-picker、switch、number
 * dictKey：数据字典名称，type为select时，传入dictKey使用数据字典下拉选择框
 * pickerType: 日期选择类型，type=date-picker时有效，支持类型见elementUI
 * required: true-必填项
 * filterable、placeholder、multiple、disabled，透传至elementUI
 * explainTxt: 输入校验失败是显示提示文字，默认为：请输入{标签名}
 *
 * @checkValue：触发输入校验，校验成功返回{key:value}形式对象，可直接用于数据提交
 */
import DictSelect from '@/components/DictSelect';
import DictRadio from '@/components/DictRadio';
import { checkFormValue } from '@/utils/form';

export default {
  name: 'FormItemGroup',
  components: {
    DictSelect,
    DictRadio,
  },
  props: {
    //列数据
    formData: {
      type: Object,
      required: true,
    },
    type: String,
    itemWidth: {
      type: String,
      default: '100%',
      required: false,
    },
  },
  data() {
    return {
      startCheck: false,
    };
  },
  methods: {
    change(value) {
      this.$forceUpdate(); //强制刷新
      this.$emit('change', value);
    },
    checkValue() {
      this.startCheck = true;
      return checkFormValue(this.formData);
    },
  },
};
</script>

<style scoped lang="scss">
.form-item-input {
  //width: 100%;
}
.form-item-explain {
  font-size: 12px;
  line-height: 22px;
  opacity: 0.7;
}
</style>
